<template>
  <div id="login">
    <div class="main">
      <h1>登录账号</h1>
      <h5>虾米 - 严选商城欢迎您</h5>
      <p class="p1"><my-input placeholder="手机号码" type="text" class="input" v-model="from.mobile" /></p>
      <p class="p2"><my-input placeholder="密码" type="password" class="input" v-model="from.pwd" /></p>
      <mybutton @button="btn">登录</mybutton>
    </div>
  </div>
</template>

<script>
import {categoryall} from "../../utils/api"
import mybutton from "@/components/mybutton/mybutton";
import myInput from "@/components/myinput/myinput";
export default {
  name: "",
  components: {
    myInput,
    mybutton,
  },
  data() {
    return {
        from:{
            mobile:'',
            pwd:''
        }
    };
  },
  created() {

  },
  methods: {
      btn(){
      categoryall(this.from).then(res=>{
          localStorage.setItem("token",res.token)
          console.log(res.token);
          this.$router.push('/')
          
      })
      }
  },
};
</script>

<style lang="scss" scoped>
* {
  font-size: 0.3rem;
}
.main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  h1 {
    width: 100%;
    height: 50px;
    text-align: left;
    line-height: 50px;
    margin: 10px 40px;
    font-size: 0.5rem;
    font-weight: 600;
  }
  h5 {
    width: 100%;
    height: 50px;
    line-height: 50px;
    margin: 10px 40px;
    color: #ccc;
  }
  .p1 {
    width: 100%;
    height: 70px;
    #myinput {
      width: 100%;
      height: 50px;
      text-align: center;

      /deep/input {
        width: 300px;
        border-radius: 6px;
        padding-left: 15px;
        height: 50px;
      }
    }
  }
  .p2 {
    width: 100%;
    height: 70px;
    #myinput {
      width: 100%;
      height: 50px;
      text-align: center;

      /deep/input {
        width: 300px;
        border-radius: 6px;
        height: 50px;
        padding-left: 15px;
      }
    }
  }
  .btn-default{
      width: 40%;
      margin-left: 30%;
      background-image: linear-gradient(red,blue);
      color: white;
  }
}
</style>
